import React from "react";
import { connect } from "react-redux";
import "antd/dist/antd.css";
import {
	changeInputValue,
	addTodoItem,
	deleteTodoItem,
	getTodoList
} from "./store/actionCreators";
import TodoListUI from "./TodoListUI";

class TodoList extends React.Component {
	componentDidMount() {
		this.props.getTodoList();
	}

	render() {
		return (
			<TodoListUI
				inputValue={this.props.inputValue}
				list={this.props.list}
				handleInputChange={this.props.handleInputChange}
				handleBtnClick={this.props.handleBtnClick}
				handleItemDelete={this.props.handleItemDelete}
			/>
		);
	}
}

const mapStateToProps = state => {
	return {
		inputValue: state.inputValue,
		list: state.list
	};
};

const mapDispatchToProps = dispatch => {
	return {
		getTodoList: () => {
			const action = getTodoList();
			dispatch(action);
		},
		handleInputChange: e => {
			const action = changeInputValue(e.target.value);
			dispatch(action);
		},
		handleBtnClick: () => {
			const action = addTodoItem();
			dispatch(action);
		},
		handleItemDelete: index => {
			const action = deleteTodoItem(index);
			dispatch(action);
		}
	};
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(TodoList);
